/**
  @author: liump
  @date: 2019年5月23日10:30:40
  @latest update: 2019年5月30日16:17:23
  @module: 补盲扩地图公共组件
  @log:  
    1. 2019年5月23日 补盲扩地图公共组件,用于回显移动端绘图
    2. 2019年5月30日 将测距信息从 marker 附近改成线段中心点
  @option: 
    1.地图只读,根据接口数据渲染页面
    2.补盲扩施工队数据
    3.根据 marker 类型更换图标
    4.根据 marker 类型添加 title
  @params:
    proId: 当前项目编号
    readOnlyAmapData: 接口返回的数据
  @data:
    {
      points: [
        { point_code: 1, prev_point_code: 0, lng: 113.742975, lat: 23.045348, distance: 0 },
        { point_code: 2, prev_point_code: 1, lng: 113.742782, lat: 23.043314, distance: 227.29 },
        { point_code: 3, prev_point_code: 2, lng: 113.74291, lat: 23.040668, distance: 294.84 },
        { point_code: 4, prev_point_code: 2, lng: 113.745528, lat: 23.043196, distance: 281.6 },
        { point_code: 5, prev_point_code: 4, lng: 113.745764, lat: 23.04053, distance: 297.76 }
      ],
      pro_id: "testdetail",
      pro_lnglat: [113.742975, 23.045348]
    }
 */
<template>
  <div class="expansion-amap">
    <!-- 地图容器 Start -->
    <div class="amap">
      <div id="expansion-amap"></div>
    </div>
    <!-- 地图容器 End  -->
  </div>
</template>

<script>
import AMap from "AMap"; //在使用地图的页面引入该组件
export default {
  name: "expansionAmap",
  props: {
    readOnlyAmapData: Object
  },
  data() {
    return {
      amap: null, // 地图初始化
      path: [], // 线段集合,每2点画一条线并清空
      polyline: null, // 折现对象初始化
      markers: [], // marker 对象集合,用于记录所有的 marker,在计算线段中心点的时候需要知道两个 marker 对象
      // 用于调试的模拟数据
      data: {
        points: [
          { point_code: 1, prev_point_code: 0, lng: 113.742975, lat: 23.045348, distance: 0, tag: "", pointType: "" },
          { point_code: 2, prev_point_code: 1, lng: 113.742782, lat: 23.043314, distance: 227.29, tag: "GJ-01", pointType: "D-OGJ" },
          { point_code: 3, prev_point_code: 2, lng: 113.74291, lat: 23.040668, distance: 294.84, tag: "GF-02", pointType: "D-NGJ" },
          { point_code: 4, prev_point_code: 2, lng: 113.745528, lat: 23.043196, distance: 281.6, tag: "PN-01", pointType: "D-OGF" },
          { point_code: 5, prev_point_code: 4, lng: 113.745764, lat: 23.04053, distance: 297.76, tag: "GF-01", pointType: "D-NGF" }
        ],
        pro_id: "testdetail",
        pro_lnglat: [113.742782, 23.043314]
      }
    };
  },
  methods: {
    /**
     * 挂载调用总方法
     */
    amapInit() {
      // 初始化地图
      this.handleAMapInit();

      // 调用地图工具库
      this.handleAMapPlugin();

      // 绘图(这里的参数应该是接口接到数据后父组件传过来的值)
      this.handleShowLine(this.readOnlyAmapData.points);
      // 测试数据
      // this.handleShowLine(this.data.points);
    },
    /**
     * AMap 地图初始化方法
     */
    handleAMapInit() {
      this.amap = new AMap.Map("expansion-amap", {
        resizeEnable: true,
        expandZoomRange: true,
        zoom: 20,
        zooms: [3, 20],
        center: this.readOnlyAmapData.pro_lnglat
        // center: [114.298469, 30.584214]
        // center: this.data.pro_lnglat
      });
    },
    /**
     * 该方法调用了 AMap 地图工具库,缩放标尺,位移圆钮,定位
     */
    handleAMapPlugin() {
      // 调用地图工具库
      AMap.plugin(["AMap.ToolBar", "AMap.Scale"], () => {
        // 调用地图工具,缩放标尺,位移圆钮
        this.amap.addControl(new AMap.ToolBar());
        this.amap.addControl(new AMap.Scale());
      });
    },
    /**
     * 该方法通过传递过来的数据渲染页面
     * @param data 传递过来的点集合 this.readOnlyAmapData.points
     */
    handleShowLine(data) {
      // 根据传递过来的数据渲染页面 
      // 对数组遍历,需要注意:
      // 1. 第一个点为起始点
      // 2. 每2个点绘制一个线段

      
      for (let i = 0; i < data.length; i++) {
        let el = data[i];
        let lnglat = [el.lng, el.lat];
        this.handleAddMarker(lnglat, el.tag, el.pointType, el.distance);
      }
      this.handleAddLine(data);
    },
    /**
     * 该方法是添加地图点标记函数,在点标记上点击右键可以开始绘制新的分支路线
     * @param lnglats 该参数是经纬度数组,例如 [lng, lat]
     * @param tag 节点title
     * @param type marmer 图标类型,用于判断用什么图片显示
     * @param distance 2个点之间的距离
     */
    handleAddMarker(lnglats, tag = "", type = "", dt = 0) {
      // 测距信息窗,根据不同的类型判断切换不同的 img
      let content = ""
      content += `<div class='marker-expansion-amap'>`
      switch (type) {
        case "D-OGJ":
          content += `<img src='/static/amap/d_ogj.png'>`
          break;
        case "D-NGJ":
          content += `<img src='/static/amap/d_ngj.png'>`
          break;
        case "D-OGF":
          content += `<img src='/static/amap/d_ogf.png'>`
          break;
        case "D-NGF":
          content += `<img src='/static/amap/d_ngf.png'>`
          break;
        // case "D-OFGQ":
        //   content += `<img src='/static/amap/新装分线盒.png'>`
        //   break;
        // case "D-NFGQ":
        //   content += `<img src='/static/amap/新装分线箱.png'>`
        //   break;
        case "W-PN":
          content += `<img src='/static/amap/w_pn.png'>`
          break;
        case "W-YS":
          content += `<img src='/static/amap/w_ys.png'>`
          break;
        default:
          content += `<img src='/static/amap/expansion_point.png'>`
          break;
      }


      content += `<div>${tag == null ? "" : tag}</div>
                  <!-- <div>${dt}<span>米</span></div> -->
                </div>`;
      // 创建点标记 marker
      this.marker = new AMap.Marker({
        position: lnglats,
        offset: new AMap.Pixel(-15, -15),
        topWhenClick: true,
        content: content
      });
      // 存储 marker 对象
      this.markers.push(this.marker)
      // 设置多个点标记
      this.marker.setMap(this.amap);
    },
    /**
     * 该方法是绘线的方法,但是划线必须一条一条划线
     */
    handleAddLine(data) {
      // TODO: 遍历数据,将2个节点之间取经纬度并绘线
      for (let i = 0; i < data.length; i++) {
        let el = data[i];
        // 找到当前节点及上一个节点的经纬度
        let node = el.point_code; // 当前节点编号
        let prevNode = el.prev_point_code; // 上一个节点编号
        let nodeLnglat = [el.lng, el.lat]; // 当前节点经纬度
        let distance = el.distance // 当前节点距上个点的距离
        let prevLnglat; // 上一个节点经纬度变量初始化
        if (prevNode == 0) {
          continue;
        }
        // 获取上一个节点的经纬度
        for (let index = 0; index < data.length; index++) {
          let elem = data[index];
          if (elem.point_code === prevNode) {
            prevLnglat = [elem.lng, elem.lat];
          }
        }
        this.path.push(nodeLnglat, prevLnglat);
        this.polyline = new AMap.Polyline({
          path: this.path,
          strokeColor: "#1abc9c", // 线条颜色
          lineJoin: "round" // 折线拐点连接处样式
        });
        // 通过当前节点和上一个节点的经纬度获取对应的 marker 对象,对象从 markers 中取
        // 第一个 marker,通过 prevLnglat -- 上一个节点经纬度获取 marker对象
        let p1
        this.markers.forEach((el, p_index) => {
          let prev_lnglat = el.getPosition()
					// console.log("TCL: handleAddLine -> prev_lnglat", prev_lnglat.lng)
          // console.log(prevLnglat[0])
          if (prev_lnglat.lng == prevLnglat[0] && prev_lnglat.lat == prevLnglat[1]) {
            p1 = this.markers[p_index].getPosition()
          }

        })
        // 第二个 marker
        let p2 = this.markers[i].getPosition()
        // 计算测距信息框中心点位置
        // console.log(p1, p2)
        let textPos = p1.divideBy(2).add(p2.divideBy(2));
        // console.log(2)
        let text = new AMap.Text({
          text: distance + '米',
          position: textPos,
          map: this.amap,
          zIndex: 50,
          style: {
            'background-color': '#1abc9c',
            'border-color': '#e1f5fe',
            'color': '#fff',
            'font-size': '12px'
          }
        })
        // 将折线添加至地图实例
        this.amap.add(this.polyline);
        this.path = [];
      }
    }
  },
  mounted() {
    this.amapInit()
  },
};
</script>

<style scoped>
/* 建项审批列表最外层容器 expansion-amap Start*/
.expansion-amap {
  widows: 100%;
}
/* 建项审批列表最外层容器 expansion-amap End and 地图容器 Start */
.amap {
  width: 100%;
  height: 500px;
  position: relative;
}
#expansion-amap {
  position: absolute;
  width: 100%;
  height: 100%;
}
/* 数据展示列表 End */
</style>

<!-- 在全局中修改地图的css -->
<style>
.expansion-amap .marker-expansion-amap {
  position: relative;
  width: 30px;
  height: 30px;
}
.expansion-amap .marker-expansion-amap img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.expansion-amap .marker-expansion-amap div:nth-child(2) {
  height: 20px;
  line-height: 20px;
  padding: 3px 6px;
  color: #ff0036;
  position: absolute;
  left: 20px;
  top: 20px;
}
.expansion-amap .marker-expansion-amap div:nth-child(3) {
  height: 20px;
  line-height: 20px;
  padding: 3px 6px;
  color: #ff0036;
  position: absolute;
  left: 20px;
  top: 20px;
}
.expansion-amap .marker-expansion-amap div:nth-child(2) {
  white-space: nowrap;
  top: -24px;
  left: -10px;
}
</style>